<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
            function Fleft()
            {
                var x1=document.getElementById("img1").style.left;
                var x=eval(Number(x1.substring(0,x1.length-2))-20);
                document.getElementById("img1").style.left=x+"px";
            }

        function FRight()
        {
            var x1=document.getElementById("img1").style.left;
            var x=eval(Number(x1.substring(0,x1.length-2))+20);
            document.getElementById("img1").style.left=x+"px";
        }

        function FUp()
        {
            var x1=document.getElementById("img1").style.top;
            var x=eval(Number(x1.substring(0,x1.length-2))-20);
            document.getElementById("img1").style.top=x+"px";
        }

        function FDown()
        {
            var x1=document.getElementById("img1").style.top;
            var x=eval(Number(x1.substring(0,x1.length-2))+20);
            document.getElementById("img1").style.top=x+"px";
        }



    </script>
</head>
<body>
<input  type=button value="===左===" onclick=Fleft()>
<input  type=button value="===右===" onclick=FRight()>
<input type=button value="===上===" onclick=FUp()>
<input  type=button value="===下===" onclick=FDown() >
<img id="img1" src="z1.gif" name="picture" style="position:
absolute;" BORDER="0" WIDTH="140" HEIGHT="100">
</body>
</html>